import { authorTodo } from '@/common/utils.js'
export default {
	methods: {
		//创建海报
		async createPoster(info) {
			const {
				background,
				avatar,
				name,
				qrCode
			} = info;
			this.$refs.loading.show('保存中');
			this.ctx = uni.createCanvasContext('newCanvas', this);
			await this.getAllImages({
				background,
				avatar,
				qrCode
			})
			//绘制图片
			await this.drawImage(background, true);
			//绘制头像
			await this.drawImage({ ...avatar,
				radius: avatar.width / 2,
				radiusSetting: {
					lt: true,
					rt: true,
					lb: true,
					rb: true
				}
			});
			// 小程序的名称
			this.drawText(name);
			//绘制二维码
			await this.drawImage(qrCode);
			//生成图片
			this.ctx.draw(true, r => {
				this.saveToImage();
			});
		},
		getAllImages({
			background,
			avatar,
			qrCode
		}) {
			return Promise.all([this.getImageInfo(background.url), this.getImageInfo(avatar.url), this.getImageInfo(qrCode.url)])
				.then(
					list => {
						background.info = list[0];
						avatar.info = list[1];
						qrCode.info = list[2]
					})
		},
		async drawImage({
			url,
			left,
			top,
			width,
			height,
			info,
			color,
			radius,
			radiusSetting
		}, auto) {
			const {
				ctx,
			} = this;
			let x = 0,
				y = 0,
				_width = width,
				_height = height;
			if (!auto) {
				if (info.width > info.height) {
					_width = info.width / (info.height / height)
					x = (info.width - width * info.height / height) / 2;
				} else if (info.width < info.height) {
					_height = info.height / (info.width / width)
					y = (info.height - height * info.width / width) / 2;
				}
			}
			ctx.save();
			this.roundRect({
				width,
				height,
				left,
				top,
				color,
				radius,
				radiusSetting
			});
			await ctx.drawImage(info.path, x, y, info.width, info.height, left, top, _width, _height);
			ctx.restore()
		},
		drawText({
			text,
			color,
			left,
			top,
			fontSize
		}) {
			const {
				ctx,
			} = this;
			ctx.save();
			ctx.setFontSize(98)
			ctx.fillStyle = color || '#000000';
			ctx.fillText('我是' + text, left, top + fontSize);
			ctx.restore();
		},
		roundRect({
			left,
			top,
			width,
			height,
			color,
			radius = 0,
			radiusSetting
		}) {
			radiusSetting = Object.assign({
				lt: false,
				rt: false,
				lb: false,
				rb: false
			}, radiusSetting || {})
			const {
				ctx
			} = this;
			ctx.beginPath();
			// 绘制左上角圆弧
			if (radiusSetting.lt) {
				ctx.arc(left + radius, top + radius, radius, Math.PI, Math.PI * 1.5);
				ctx.lineTo(left + width - radius, top);
			} else {
				ctx.lineTo(left + width - radius, top);
			}
			// 绘制右上角圆弧
			if (radiusSetting.rt) {
				ctx.arc(left + width - radius, top + radius, radius, Math.PI * 1.5, Math.PI * 2);
				ctx.lineTo(left + width, top + height - radius);
			} else {
				ctx.lineTo(left + width, top);
				ctx.lineTo(left + width, top + height - radius);
			}
			// 绘制右下角圆弧
			if (radiusSetting.rb) {
				ctx.arc(left + width - radius, top + height - radius, radius, 0, Math.PI * 0.5);
				ctx.lineTo(left + radius, top + height);
			} else {
				ctx.lineTo(left + width, top + height);
				ctx.lineTo(left, top + height);
			}

			// 绘制左下角圆弧
			if (radiusSetting.lb) {
				ctx.arc(left + radius, top + height - radius, radius, Math.PI * 0.5, Math.PI);
				ctx.lineTo(left, top + radius);
			} else {
				ctx.lineTo(left, top + height);
				ctx.lineTo(left, top);
			}
			// 填充颜色
			ctx.fillStyle = color || '#ffffff';
			ctx.fill();
			ctx.clip();
		},
		getImageInfo(url) {
			return new Promise(async resolve => {
				uni.getImageInfo({
					src: url,
					success(res) {
						resolve(res);
					},
					fail(res) {
						resolve({});
					}
				});
			});
		},
		saveToImage() {
			const {
				width,
				height
			} = this;
			// 把画布转化成临时文件
			uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: width, // 画布的宽
					height: height, // 画布的高,
					destHeight: height,
					destWidth: width,
					canvasId: 'newCanvas',
					fileType: 'png',
					success: res => {
						this.downloadSharePhoto(res.tempFilePath)
					},
					fail: res => {
						this.$refs.loading.hide();
						uni.showToast({
							title: '保存失败，稍后再试',
							duration: 2000,
							icon: 'none'
						});
					}
				},
				this
			);
		},
		downloadSharePhoto(filePath) {
			// 保存图片至相册
			authorTodo({
				type: 'writePhotosAlbum',
				reject: () => {
					this.$refs.loading.hide();
				},
				success: () => {
					uni.saveImageToPhotosAlbum({
						filePath,
						success: res => {
							this.$refs.loading.hide();
							this.showShare = false;
							uni.showToast({
								title: '图片保存成功，可以去分享啦~',
								duration: 2000,
								icon: 'none'
							});
						},
						fail: (e) => {
							console.log('保存失败，稍后再试');
							this.$refs.loading.hide();
						}
					});
				}
			})
		},
	}
}
